
import QtQuick.Controls 2.5
import QtQuick 2.13


Page {

    property int nAniDuration: 800

    Rectangle {
        color: "white"
        opacity: 0.5
        anchors.fill: parent
    }

    Text {
        id: name
        text: qsTr("Ingredient")
        color: "white"
        font.family: "GothamBook"
        font.pixelSize: 64
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.topMargin: 72
        anchors.leftMargin: 805
        opacity: 0.0
    }


    GridView {
        id: g
        opacity: 0
        anchors.fill: parent
        anchors.leftMargin: 122
        anchors.topMargin: 231
        cellHeight: 359
        cellWidth: 307
        delegate: Rectangle {
            width: 240
            height: 240
            radius: 120
            color: "transparent"

            Image {
                id: imx
                anchors.fill: parent
                source: src
            }

            Text {
                height: 24
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: imx.bottom
                anchors.topMargin: 4
                font.family: "GothamBook"
                font.pixelSize: 24
                text: tt
            }
        }

        model: ListModel {
            id: inModel
            ListElement {
                src: "qrc:/imgs/ingredients/chicken.png"
                tt: "General Chicken"
            }
            ListElement {
                src: "qrc:/imgs/ingredients/ginger.png"
                tt: "Ginger"
            }
            ListElement {
                src: "qrc:/imgs/ingredients/broccoli.png"
                tt: "Broccoli"
            }
            ListElement {
                src: "qrc:/imgs/ingredients/mushroom.png"
                tt: "Mushroom"
            }

            ListElement {
                src: "qrc:/imgs/ingredients/lemon.png"
                tt: "Lemon"
            }
            ListElement {
                src: "qrc:/imgs/ingredients/beef.png"
                tt: "Beef"
            }
            ListElement {
                src: "qrc:/imgs/ingredients/tomato.png"
                tt: "Tomato"
            }
            ListElement {
                src: "qrc:/imgs/ingredients/garlic.png"
                tt: "Garlic"
            }
            ListElement {
                src: "qrc:/imgs/ingredients/mint.png"
                tt: "Mint"
            }
        }
    }


    PropertyAnimation {
        id: pa
        targets:[name, g]
        property: "opacity"
        duration: nAniDuration
    }

    function resetAni() {
        g.opacity = 0.0
        name.opacity = 0.0
    }

    function playAni() {
        resetAni()
        pa.to = 1.0
        pa.start()
    }



}



